<template>
  <q-dialog v-model="show" persistent>
    <q-card class="dialog-content" style="min-width: 488px; max-height: 700px">
      <q-card-section class="dialog-title bg-primary" >
        <div class="text-center text-white dialog-title">
          <q-btn
            style="font-size: 18px;color: white"
            flat round dense
            class="iconfont icontubiao-67 white close-btn dialog"
            @click="close()"
          />
          <span class="font-size-16">
            模块介绍
          </span>
        </div>
      </q-card-section>
      <q-card-section class="flex items-center justify-between" style="padding: 20px">
        <div class="moudle-item flex items-center">
          <img :src="`statics/img/home/${detail.icon}.svg`">
          <div style="padding-left: 10px;width: calc(100% - 72px)">
            <div class="font-size-16 text-ellipsis">{{detail.name}}</div>
            <div style="padding: 4px 0;color: #999" class="text-ellipsis">{{detail.tips}}</div>
            <div style="color: #999">用户数：{{detail.users}}</div>
          </div>
        </div>
        <div>
          <q-btn unelevated color="primary" label="已开通" disable v-if="permission" />
          <q-btn unelevated color="primary" label="开通" @click="showTel()" v-else />
        </div>
      </q-card-section>
      <q-card-section style="padding: 20px 20px 10px;border-top: 1px solid #d3d3d3">
        {{detail.detail}}
      </q-card-section>
      <q-card-section style="padding: 0" v-if="type !== 'moudle'">
        <swiper :options="swiperOption" style="height: inherit;padding: 0">
          <swiper-slide v-for="(item,index) in imgList" :key="index" style="width: 320px;padding: 10px">
            <div class="img" :style="`background-image: url('${item}')`"></div>
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev">
            <q-btn round color="black" size="13px" icon="chevron_left" class="swiper-button" />
          </div>
          <div class="swiper-button-next" slot="button-next">
            <q-btn round color="black" size="13px" icon="chevron_right" class="swiper-button" />
          </div>
        </swiper>
        <div class="swiper-pagination"></div>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>
import { loadToken, translateToken } from 'yz-help'
import { getPermissions } from '../../../boot/home/common-info'
import Vue from 'vue'
import createStore from 'app/src/store/index'
import item from '../../../components/tree-list/item'
const store = typeof createStore === 'function'
  ? createStore({ Vue })
  : createStore

export default {
  name: 'moudle-detail',
  data () {
    return {
      show: false,
      permission: false,
      type: '',
      imgList: [
        'statics/img/temporary/1.jpg',
        'statics/img/temporary/2.png',
        'statics/img/temporary/3.png',
        'statics/img/temporary/4.png',
        'statics/img/temporary/5.png'
      ],
      swiperOption: {
        slidesPerView: 'auto',
        spaceBetween: 0,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },
      detail: {
        name: '',
        tips: '',
        detail: '',
        icon: '',
        iconColor: '',
        permission: '',
        users: 0,
        isComplete: false,
        popularity: 0
      }
    }
  },
  methods: {
    close () {
      this.show = false
      this.permission = false
    },
    getData (data, type) {
      this.show = true
      this.detail = data
      this.type = type
      if (type === 'moudle') {
        this.hasPermission(data.permission)
      } else {
        this.permission = item.isOpen
      }

      // console.log(data)
    },
    showTel () {
      this.$q.dialog({
        title: `<p class="dialog-notice-title font-16" style="font-weight: normal"><i class="iconfont iconpingtaitubiao-53 font-18" style="margin-right: 10px;vertical-align: middle; color: #333"></i>服务电话：4006-021-808</p>`,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        }
      })
    },
    // 判断是否有权限
    async hasPermission (permission) {
      if (permission) {
        const permissionId = permission.value
        // 判断vuex中是否存在权限映射列表
        if (store.getters.permissions.length === 0) {
          // 若不存在重新获取
          let res = await this._getPermissions()
          // 提交状态管理
          store.commit('SET_PERMISSIONS', res.data)
        }

        // 提取权限映射数组
        let permissionList = store.getters.permissions

        // 判断按钮权限id在不再权限数组中
        this.permission = permissionList.includes(permissionId)
      }
    },
    // 获取角色权限映射列表
    _getPermissions () {
      const token = loadToken()
      const userInfo = translateToken(token)
      const userId = userInfo.user_id
      return new Promise(resolve => {
        getPermissions(userId).then(res => {
          resolve(res)
        })
      })
    }
  }
}
</script>

<style scoped lang="stylus">
  .moudle-item img{
    width 72px
    height 72px
    display block
  }
  .swiper-button{
    opacity .4
    margin 0
    min-width 32px !important
    width 32px !important
  }
  .img{
    width 320px
    box-shadow 0px 0px 5px 0px rgba(0, 0, 0, 0.1)
    height 180px;
    background-color #fff
    background-position center
    background-repeat no-repeat
    background-size contain
  }
  .swiper-button-prev, .swiper-button-next {
    background-image none
    width 32px
    height 32px
  }
  .swiper-pagination{
    margin -30px auto 0
    position relative
    >>>.swiper-pagination-bullet{
      background-color rgba(95, 119, 253, .4)
      width 12px
      height 12px
      margin 5px
    }
    >>>.swiper-pagination-bullet-active{
      background-color rgba(95, 119, 253, .6)
    }
  }
</style>
